<template>

    <el-card class="boxcard" shadow="hover">
        <div slot="header" class="clearfix">


            <span style="color: #333; font-size: 12px;">{{ item.type }}</span>

        </div>
        <div class="text ">
            <img :src="item.img"></img>

            <div class="right">
                <h2 style="float: left;"> {{ item.title }} </h2> <span style="float: right; color: #999;"> {{ item.day }}
                </span>

                <el-progress style="width: 75%; float: left; margin-top: 9px;" :percentage="item.value" :color="customColors" :show-text="false"></el-progress>

                <span style="margin-top: -3px;float: right;color: rgb(55, 125, 255);    font-size: 16px;font-weight: 700;">{{ item.value }}%  </span>
            </div>
        </div>
    </el-card>

</template>

<script>



export default {
    name: 'boxcard',
    data() {
        return {
            customColors: [
                { color: '#f56c6c', percentage: 20 },
                { color: '#e6a23c', percentage: 40 },
                { color: '#5cb87a', percentage: 60 },
                { color: '#1989fa', percentage: 80 },
                { color: '#6f7ad3', percentage: 100 }
            ]
        }
    },
    props: {
        item: {
            type: Object
        }
    },
    mounted() {

    },
    beforeDestroy() {

    }
}
</script>
<style lang="scss">
.boxcard {
    .el-card__header {
        background-color: #f5f7fb;
        padding: 12px 12px
    }
}
</style>
<style lang="scss" scoped>
.boxcard {
    margin-top: 20px;
    width: 289px;
    height: 125px;
    border-radius: 8px;
    box-shadow: 0 0 10px 0 hsla(0, 0%, 58%, .1);
    transition-property: transform, box-shadow;
    transition-duration: .3s;
    background-color: #fff;
    cursor: pointer;
 
    .text {
        img {
            width: 48px;
            height: 48px;
        }

        .right {
            width: 181px;

            line-height: 30px;
            float: right;

            h2 {

                width: 118px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>